import { val } from 'cheerio/lib/api/attributes'
import React, { Component } from 'react'
import { Input, Button, Select } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import './list_01.scss'
export default class List_01 extends React.Component {
    state = {
        val: '',
        list: []
    }
    handleChange = (event) => {
        let v = event.target.value
        this.setState({ val: v })
    }
    handleAdd = () => {
        let { list, val } = this.state;
        list.push(val)
        this.setState({ list })

    }
    render() {
        const { val, list } = this.state
        // const width = { width: 200 }
        const suffix = (
            <AudioOutlined
                style={{
                    fontSize: 16,
                    color: '#fcde7f',
                }}
            />
        );
        const { Search } = Input;
        const { Option } = Select;

        const handleChange = (value) => {
            console.log(`selected ${value}`);
        };
        const onSearch = (value) => console.log(value);
        return (
            <div>
                <p>welcome</p>
                <h3>添加爱好</h3>
                <Input type="text" style={{ width: 200 }} value={val} onChange={this.handleChange} />
                <Button onClick={this.handleAdd}>添加</Button>
                <ul>
                    {list.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })}
                </ul>
                <Search

                    placeholder="input search text"

                    onSearch={onSearch}
                    style={{
                        width: 304,
                    }} />
                <Search
                    style={{
                        width: 304,
                    }}
                    placeholder="input search text"
                    onSearch={onSearch}
                    enterButton />
                <Search
                    placeholder="input search text"
                    enterButton="Search"
                    size="large"

                    style={{ width: 300 }}
                    onSearch={onSearch}
                />

                <br />
                <Select
                    defaultValue="lucy"
                    style={{
                        marginTop: 20,
                        width: 120,
                    }}
                    onChange={handleChange}
                >
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>
                        Disabled
                    </Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
            </div>
        )
    }
}
